<template>
    <div class="dormitory-sanitation">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="房间">
                <el-cascader
                        @visible-change="handleVisibleChange"
                        v-model="searchForm.roomId"
                        :options="buildingRooms"
                        :props="{ emitPath: false }"
                        :show-all-levels="false">
                </el-cascader>
            </el-form-item>
            <el-form-item label="分数">
                <el-input placeholder="大于该分数的所有记录" v-model="searchForm.score"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
                <el-button type="primary" @click="handleCreate">创建</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="5">
            <el-col :span="12">
                <el-card style="height: 300px">
                    <div id="roomChart" :style="{width: '100%', height: '300px'}"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="height: 300px">
                    <div id="buildingChart" :style="{width: '100%', height: '300px'}"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                default-expand-all
                stripe
                size="mini">
            <el-table-column
                    prop="roomName"
                    label="房间"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="score"
                    label="分数"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="备注"
                    width="*">
            </el-table-column>
            <el-table-column
                    prop="gmtCreate"
                    label="创建时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="gmtModified"
                    label="修改时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="260">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination :parentMethod="listSanitation"
                              :pagination="this.$store.state.Navigation.pagination"></dormitory-pagination>
        <el-dialog title="卫生情况登记" :visible.sync="dialogFormVisible" label-width="150px">
            <el-form ref="form" :model="sanitationForm" label-width="100px">
                <el-form-item label="房间">
                    <el-cascader
                            required
                            :options="options"
                            clearable
                            placeholder="请选择房间"
                            v-model="sanitationForm.roomId">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="分数">
                    <el-input v-model="sanitationForm.score" placeholder="请输入分数" required></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea"
                              required
                              placeholder="请填写备注"
                              v-model="sanitationForm.content"
                              :rows="2"
                              resize="none"
                              maxlength="200"
                              show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import DormitoryPagination from "../../components/DormitoryPagination";
    import PageSizeUtils from "../../../../utils/PageSizeUtils";

    import {listBuilding, selectBuildingByCurrentUser} from "../../../../api/manage/building";
    import {listRoomByBuildingId} from "../../../../api/manage/room";
    import {
        listSanitationByManage,
        deleteSanitation,
        saveSanitation,
        listScoreByManage,
        listCountBeyondScoreByBuilding, listSanitation,
    } from "../../../../api/daily/sanitation";

    export default {
        name: 'Sanitation',
        components: {DormitoryPagination},
        data() {
            return {
                activeName: 'first',
                searchForm: {
                    roomId: '',
                    score: '',
                },
                buildingRooms: [],
                tableData: [],
                dialogFormVisible: false,
                sanitationForm: {
                    roomId: '',
                    score: '',
                    content: '',
                },
                options: [],
                countColumnChart: {}
            }
        },
        mounted() {
            this.drawBar([], []);
            this.buildingCountColumnChart([], []);
        },
        methods: {
            buildingCountColumnChart(chartData, buildingList) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('buildingChart'))
                // 绘制图表
                myChart.setOption({
                    title: {text: '宿舍楼卫生统计'},
                    tooltip: {},
                    xAxis: {
                        name: '楼号',
                        data: buildingList
                    },
                    yAxis: {
                        name: '平均分数',
                    },
                    series: [{
                        name: '平均分数',
                        type: 'bar',
                        data: chartData
                    }]
                });
            },
            drawBar(chartData, scoreSection) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('roomChart'))
                // 绘制图表
                myChart.setOption({
                    title: {text: '房间卫生统计'},
                    tooltip: {},
                    xAxis: {
                        name: '分数\n区间',
                        data: scoreSection
                    },
                    yAxis: {
                        name: '房间数',
                    },
                    series: [{
                        name: '房间数',
                        type: 'bar',
                        data: chartData
                    }]
                });
            },

            listSanitation(current, size) {
                listSanitation(this.searchForm, current, size).then(response => {
                    if (response.data.sanitations != null) {
                        this.countColumnChart = response.data.countColumn
                        this.tableData = response.data.sanitations.records
                        let chartData = []
                        let scoreSection = []
                        Object.keys(response.data.countColumn).forEach(function (key) {
                            scoreSection.push(key)
                            chartData.push(response.data.countColumn[key])
                        })
                        this.drawBar(chartData, scoreSection)
                        chartData = []
                        scoreSection = []
                        response.data.buildCountColumn.forEach(obj => {
                            scoreSection.push(obj.name + "楼")
                            chartData.push(obj.score)
                        })
                        this.buildingCountColumnChart(chartData, scoreSection)
                        PageSizeUtils.setPagination(response.data.sanitations)
                    }
                })
            },
            handleClick(tab, event) {

            },
            handleSearch() {
                this.listSanitation(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleReset() {
                this.searchForm = {}
            },
            handleRefresh() {
                this.listSanitation(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleCreate() {
                this.options = [];
                this.sanitationForm = {}
                selectBuildingByCurrentUser().then(response => {
                    let building = response.data.building;
                    if (building != null) {
                        listRoomByBuildingId(building.ukId).then(response => {
                            let child = [];
                            response.data.rooms.forEach(item => {
                                child.push({
                                    label: item.name,
                                    value: item.ukId,
                                })
                            })
                            this.options.push({
                                label: building.name,
                                value: building.ukId,
                                children: child
                            })
                        })
                    }
                })
                this.dialogFormVisible = true;
            },
            handleSave() {
                if (this.sanitationForm.roomId != null) {
                    this.sanitationForm.roomId = this.sanitationForm.roomId[this.sanitationForm.roomId.length - 1]
                    saveSanitation(this.sanitationForm).then(response => {
                        this.listSanitation(this.$store.state.Navigation.pagination.current,
                            this.$store.state.Navigation.pagination.size);
                        this.dialogFormVisible = false;
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            handleDelete(index, row) {
                let b = confirm("确定删除该条数据？");
                if (b) {
                    deleteSanitation(row.ukId).then(response => {
                        this.listSanitation(this.$store.state.Navigation.pagination.current,
                            this.$store.state.Navigation.pagination.size);
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            handleEdit(index, row) {

            },
            setRoomChartTitle() {
                // selectBuildingByCurrentUser().then(response => {
                //     return response.data.building.name.toString();
                // });
            },
            setRoomChartData() {
                let roomChartData = new Array();
                listScoreByManage().then(response => {
                    let one = 0, two = 0, three = 0, four = 0, five = 0;
                    response.data.scores.forEach(item => {
                        switch (parseInt(item / 10)) {
                            case 10:
                            case 9:
                                five++;
                                break;
                            case 8:
                                four++;
                                break;
                            case 7:
                                three++;
                                break;
                            case 6:
                                two++;
                                break;
                            default:
                                one++;
                                break;
                        }
                    })
                    roomChartData.push([one, two, three, four, five]);
                })
                return roomChartData;
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            },
            listBuildingRoom() {
                this.buildingRooms = [];
                listBuilding().then(response => {
                    let buildingList = new Array();
                    buildingList = response.data.buildings.records;
                    for (let index in buildingList) {
                        listRoomByBuildingId(buildingList[index].ukId).then(response => {
                            let roomList = new Array();
                            roomList = response.data.rooms;
                            let rooms = new Array();
                            for (let i in roomList) {
                                rooms.push({
                                    label: roomList[i].name,
                                    value: roomList[i].ukId,
                                })
                            }
                            this.buildingRooms.push({
                                label: buildingList[index].name,
                                value: buildingList[index].ukId,
                                children: rooms,
                            })
                        })
                    }
                })
            },
            handleVisibleChange(value) {
                if(value){
                    this.listBuildingRoom()
                }
            }
        },
        created() {
            PageSizeUtils.setPagination({})
            this.listSanitation(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size);
        }


    }
</script>

<style scoped>
    .dormitory-sanitation {
        background-color: #ffffff;
        border: #ffffff 3px solid;
    }

</style>

